<template>
    <div class="teacher-list">
        <ZkList ref="table" rowKey="id" :searchs="searchs" :columns="columns" :data="loadData" :rowSelection="rowSelection">
            <template #operBtns>
                <div>
                    <a-button type="primary" icon="plus" @click="handleEdit()">新增</a-button>
                    <a-button type="danger" icon="delete" @click="batchDel()">删除</a-button>
                    <a-button type="primary" @click="selectAreaTree()">选择区域</a-button>
                    <a-button type="primary" @click="onSelectProject()">选择项目</a-button>
               </div>
            </template>
            <template #status="record">
                <a-switch checked-children="启用" un-checked-children="停用" :checked="record.status==BaseStatusEnum.ENABLE" @click="switchStatus(record)" />
            </template>
            <template #move="record">
                <span>
                    <zk-btn @click="preFunc(record)">上移</zk-btn>
                    <a-divider type="vertical" /> 
                    <zk-btn @click="nextFunc(record)">下移</zk-btn>
                </span>
            </template>
            <template #action="record">
                <BtnsGroup>
                    <zk-btn @click="handleDetail(record)" icon="eye">查看</zk-btn>
                    <zk-btn @click="handleEdit(record)" icon="edit">修改</zk-btn>
                    <zk-btn @click="handleDel(record)" icon="delete">删除</zk-btn>
                </BtnsGroup>
            </template>
            <!-- <template #action="record">
                <span>
                    <zk-btn @click="handleDetail(record)" icon="eye">查看</zk-btn>
                    <a-divider type="vertical" /> 
                    <zk-btn @click="handleEdit(record)" icon="edit">修改</zk-btn>
                    <a-divider type="vertical" />
                    <zk-btn @click="handleDel(record)" icon="delete">删除</zk-btn>
                </span>
            </template> -->
        </ZkList>
        <TeacherEdit ref="edit"></TeacherEdit>
        <TeacherDetail ref="detail"></TeacherDetail>
        <SelectAreaTree ref="areaTree"></SelectAreaTree>
        <SelectProject ref="selectProject"></SelectProject>
    </div>
</template>
<script>
    import { ZkList, InputTypeEnum } from '@/appBase';
    import TeacherEdit from './TeacherEdit.vue';
    import TeacherDetail from './TeacherDetail.vue';
    import { sexDic } from '../common/service/dic';
    import { getStatusOpts } from '../common/service/base';
    import { BaseStatusEnum } from '../common/enum/enum';
    import { queryEduTeacherList } from '@/api/demo';
    import SelectAreaTree from '../common/SelectAreaTree.vue';
    import BtnsGroup from '@/modules/common/components/BtnsGroup.vue';
    import SelectProject from '@/modules/common/SelectProject.vue';

    export default {
        name: 'PersonnelList',
        components: {
            ZkList,
            TeacherEdit,
            TeacherDetail,
            SelectAreaTree,
            BtnsGroup,
            SelectProject
        },
        data() {
            return {
                title: "教师管理",
                BaseStatusEnum,
                // 查询
                searchs: [
                    { title: "教师账号", dataIndex: 'account' },
                    { title: "教师姓名", dataIndex: 'name' },
                    { title: "教师性别", dataIndex: 'sex', type: InputTypeEnum.SELECT, options: () => sexDic.getOpts(1) },
                    { title: "手机号码", dataIndex: 'phone', type: InputTypeEnum.NUMBER },
                    { title: "所在专业", dataIndex: 'majorCode', type: InputTypeEnum.SELECT, options:()=>sexDic.getOpts() },
                    { title: "教师状态", dataIndex: 'status',type: InputTypeEnum.SELECT, options:()=> getStatusOpts(1) },
                    { title: "开始时间", dataIndex: 'beginTime', type: InputTypeEnum.DATE_TIME },
                    { title: "结束时间", dataIndex: 'endTime', type: InputTypeEnum.DATE_TIME },
                ],
                // 表头
                columns: [
                    { title: "教师账号", dataIndex: "account", width: '150px', maxLength: 10 },
                    { title: "教师姓名", dataIndex: "name", width: '150px', maxLength: 10 },
                    { title: "教师性别", dataIndex: "sexLabel", width: '100px' },
                    { title: "手机号码", dataIndex: "phone", width: '100px' },
                    { title: "排序", scopedSlots: { customRender: "move" }, width: '150px' },
                    { title: "所在专业", dataIndex: "major", width: '150px' },
                    { title: "教师状态", scopedSlots: { customRender: "status" }, width: '100px' },
                    { title: "注册时间", dataIndex: "createdTime", width: '150px',format:true },
                    { title: "功能列", scopedSlots: { customRender: "action" }, width: '180px', fixed: 'right' },
                ],
                // 加载数据方法 必须为 Promise 对象
                loadData: (queryParams, parameter) => {
                    this.curParams = {
                        ...queryParams
                    };
                    return queryEduTeacherList(queryParams, parameter);
                },
                rowSelection:{
                    onChange(selectedRowKeys, selectedRows){
                        console.log(selectedRowKeys, selectedRows);
                    }
                },
                selectedList:[]
            }
        },
        methods: {
            handleDetail(item) {
                this.$refs.detail.show({
                    id: item.id,
                    onOk: () => {
                        this.$refs.table.refresh(true);
                    }
                });
            },

            handleEdit(item) {
                if (item) {
                    this.$refs.edit.show({
                        id: item.id,
                        onOk: () => {
                            this.$refs.table.refresh(true);
                        }
                    });
                } else {
                    this.$refs.edit.show({
                        onOk: () => {
                            this.$refs.table.refresh(true);
                        }
                    });
                }
            },

            handleDel(item) {
                this.$confirm({
                    title: '提示',
                    content: `确定要删除当前教师？`,
                    onOk: async () => {
                        // await delEduTeacher({ id: item.id });
                        this.$refs.table.refresh(true);
                    }
                });
            },
            batchDel(){
                this.$confirm({
                    title: '提示',
                    content: `确定要删除选中的教师？`,
                    onOk: () => {
                        // delEduTeacher({ id: item.id }).then((result) => {
                        //     this.$refs.table.refresh(true);
                        // });
                    }
                });
            },
            async switchStatus(item) {
                if (item.status==BaseStatusEnum.ENABLE) {
                    // await updateEduTeacherStatus({ id: item.id,status:BaseStatusEnum.DISABLED });
                }else{
                    // await updateEduTeacherStatus({ id: item.id,status:BaseStatusEnum.ENABLE });
                }
                this.$refs.table.refresh(false);
            },
            async preFunc(item){
                const res = await this.$refs.table.queryPreRow(item.id);
                console.log(res);
            },
            async nextFunc(item){
                const res = await this.$refs.table.queryNextRow(item.id);
                console.log(res);
            },
            selectAreaTree(){
                this.$refs.areaTree.show({
                    canSelectedLevels:[2],
                    onOk(data){
                        console.log(data);
                    }
                })
            },
            onSelectProject(){
                this.$refs.selectProject.show({
                    customerIds:['1561622202478071810'],
                    selectedList:this.selectedList,
                    onOk(data){
                        console.log(data);
                    }
                });
            }
        }
    }
</script>